<template>
	<div class="page-wrap">
		<div class="search-box">
		  <div style="height:10px"></div>
		 <div>
			 <a-button style="margin-right:10px" class="add-right" @click="addnew(true)" >返回</a-button>
			 <a-button class="add-right" @click="sureAdd" type="primary">保存</a-button>
		 </div>
		</div>
		
		<div class="page-main">
			
			
			<div class="page-right">
				<a-form
					
				  :model="addForm"
				  ref="formRef"
					layout="vertical"
				  name="addForm"
				 
				  autocomplete="off"
				  >
					
						<a-row justify="space-between" style="margin-bottom:12px">
							<a-col :span="7">
								<a-form-item
								:colon="true"
								  label="文章标题"
								  name="articleTitle"
								  :rules="[{ required: true, message: '文章标题' }]"
								>
								  <a-input  placeholder="文章标题" v-model:value="addForm.articleTitle" />
								</a-form-item>
							</a-col>
							<a-col :span="7">
								<a-form-item
								:colon="true"
								  label="副标题"
								  name="subTitle"
								  
								>
								  <a-input  placeholder="副标题" v-model:value="addForm.subTitle" />
								</a-form-item>
							</a-col>
							<a-col :span="7">
								<a-form-item
								:colon="true"
								  label="文章来源"
								  name="articleSource"
								  
								>
								  <a-input  placeholder="文章来源" v-model:value="addForm.articleSource" />
								</a-form-item>
							</a-col>
							<a-col :span="7">
								<a-form-item
								:colon="true"
								  label="文章发布时间"
								  name="articleTime"
								  :rules="[{ required: true, message: '文章发布时间' }]"
								>
								 <a-date-picker
								      placeholder="文章发布时间" 
									  v-model:value="addForm.articleTime"
								      format="YYYY-MM-DD HH:mm:ss"
								      style="width:100%"
								      
								    />
								 
								</a-form-item>
							</a-col>
							<a-col :span="7">
								<a-form-item
								:colon="true"
								  label="文章关键字"
								  name="articleKeyword"
								  
								>
								  <a-input  placeholder="文章关键字" v-model:value="addForm.articleKeyword" />
								</a-form-item>
							</a-col>
							<a-col :span="7">
								<a-form-item
								:colon="true"
								  label="文章描述"
								  name="articleDiscrip"
								  
								>
								  <a-input  placeholder="文章描述" v-model:value="addForm.articleDiscrip" />
								</a-form-item>
							</a-col>
							<a-col :span="7">
								<a-form-item
								:colon="true"
								  label="文章作者"
								  name="articleAnthor"
								  
								>
								  <a-input  placeholder="文章作者" v-model:value="addForm.articleAnthor" />
								</a-form-item>
							</a-col>
							<a-col :span="7">
								<a-form-item
								:colon="true"
								 name="categoryCode"
								  label="文章所属栏目"
								 :rules="[{ required: false, message: '文章所属栏目' }]"
								>
								<a-tree-select
								   v-model:value="addForm.categoryCode"
								   show-search
								   tree-checkable
								       
								    :show-checked-strategy="SHOW_PARENT"
								   style="width: 100%"
								   :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
								   placeholder="文章所属栏目"
								   allow-clear
								   :labelInValue="true"
								   :fieldNames="{label:'categoryName', value: 'categoryCode'}"
								   tree-default-expand-all
								   :tree-data="treeData"
								   tree-node-filter-prop="label"
								  />
								 
								</a-form-item>
							</a-col>
							
							<a-col :span="7">
								<a-form-item style="width:100%" :rules="[{ required: true, message: '排序' }]"  label="排序" name="sort">
								    <a-input-number placeholder="排序" style="width:100%" v-model:value="addForm.sort" />
								</a-form-item>
							</a-col>
							
							<a-col :span="7">
								<a-form-item
								  label="文章缩略图"
								>
									 <a-upload
									    list-type="picture-card"
									    :show-upload-list="false"
									    v-model:file-list="fileList"
									    name="files"
									    :showUploadList="false"
									    :action="fileurl"
									    :headers="headers"
									    @change="upChange"
									  >
									    <img style="width:100%;height:100%" v-if="addForm.articleImg" :src="viewfileUrl+addForm.articleImg" alt="avatar" />
									    <div v-else>
											
									      <loading-outlined v-if="loading"></loading-outlined>
									      <plus-outlined v-else></plus-outlined>
									      <div class="ant-upload-text">点击上传</div>
									    </div>
									  </a-upload>
									
									
									
								 
								</a-form-item>
							</a-col>	
						</a-row>
						
						
						
						
				  </a-form>
				  
				  
				<vue-ueditor-wrap style="width:100%" v-model="addForm.articleContent" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
				
				<!-- <a-row justify="center" class="reset-dialog-footer" >
					<div class="submit-btn" @click="sureAdd">
						提交
					</div>
				</a-row> -->
			</div>
		</div>
	</div>
	
</template>

<script>
	import { PlusOutlined } from '@ant-design/icons-vue';
	const columns= [
		{
					title: "序号",
					width: 60,
					align:'center',
					dataIndex: 'index'
				  },
				{
				  title: '所属栏目',
				 
				  dataIndex: 'applyCode'
				},
		 {
		   title: '作者',
		   dataIndex: 'deptName'
		 },
		{
		  title: '排序',
		  dataIndex: 'purchaseTotal',
		  
		},
		 {
		   title: '点击量',
		   dataIndex: 'sapplyTime',
		   
		 },
		 {
		   title: '发布时间',
		   dataIndex: 'userName',
		   
		 },
		 {
		   title: '状态',
		   dataIndex: 'currentStep',
		   
		 },
		
		
		
	  {
	    title: '操作',
	    dataIndex: 'action',
	  	width:'140px'
	  }
	 
	];
	import {useStore} from 'vuex'
	import {
		slxhapisystemarticleinfoaddOrEditArticleInfo,
		slxhapisystemcategorygetArticleTreeList
		} from '../../../api/manpart.js'
	import {defineComponent,onMounted,ref,reactive,watch } from 'vue'
	import {useRouter} from 'vue-router'
	let user=JSON.parse(localStorage.getItem('shuilixiehui-user'))
	user=user?user:{}
	import bus from '../../bus.js'
	import dayjs from 'dayjs'
	export default defineComponent({
		components:{
			PlusOutlined
		},
		 created() {
		    
		    this.editorConfig = {
				initialFrameWidth: "100%",
		      UEDITOR_HOME_URL: '/assetSystem/UEditor/', // 访问 UEditor 静态资源的根路径
		      serverUrl: 'http://192.168.220.124:8989/user-center/slxh/api/system/file/uploadFilesGET', // 服务端接口
		    };
		  },
		setup() {
			const store = useStore();
			let viewfileUrl=globalVar.viewfileUrl
			let fileurl=globalVar.upActionurl+'/slxh/api/system/file/uploadFiles'
			let treeData=ref([])
			let formRef=ref()
			let msg = ref('');     
			onMounted(()=>{
				
				
				if(store.state.record&&store.state.record.articleCode){
					
					for(let key in store.state.record){
						if(key=='articleTime'){
							addForm[key]=dayjs(store.state.record[key])
						}else if(key=='categoryCode'){
							if(store.state.record[key]){
								let categoryCode=store.state.record[key].split(',')
								let sp1=store.state.record.sp1.split(',')
								addForm[key]=categoryCode.map((item,index)=>{
									return {
										label:sp1[index],
										value:item
									}
								})
							}
							
						}else{
							addForm[key]=store.state.record[key]
						}
						
					}
					
					
				}else{
					addForm.articleAnthor=user.userName
					addForm.articleTime=dayjs()
				}
				getTreeData()
				
			})
			
			let addForm=reactive({
				"articleAnthor": "",
				"articleCode": "",
				"articleContent": "",
				"articleDiscrip": "",
				"articleImg": "",
				"articleKeyword": "",
				"articleSource": "",
				"articleTime": "",
				"articleTitle": "",
				"categoryCode": [],
				"readNum": 0,
				"sort": null,
				"subTitle": ""
				
			})

			const addnew=(isshowContent)=>{
				
				bus.emit('addcontent',{isshowContent})
			}
			
			const sureAdd=()=>{
				formRef.value
				.validate()
				.then(() => {
					
					let transData=JSON.parse(JSON.stringify(addForm))
					transData.articleTime=dayjs(transData.articleTime).format('YYYY-MM-DD HH:mm:ss')
					if(addForm.categoryCode.length){
						transData.categoryCode=addForm.categoryCode.map(item=>{
							return item.value
						}).join(',')
						
						transData.sp1=addForm.categoryCode.map(item=>{
							return item.label
						}).join(',')
					}else{
						// transData.categoryCode=[]
						
					}
					
					
					slxhapisystemarticleinfoaddOrEditArticleInfo(transData).then(e=>{
						
						if(e.code==1){
							for(let key in addForm){
								if(key=='categoryCode'){
									addForm[key]=[]
								}else{
									addForm[key]=null
								}
								
							}
							
							store.commit('recordChange',{})
						
							addnew(true)
							globalVar.Message.success('操作成功')
						}else{
							globalVar.Message.warning(e.message)
						}
					}).catch(err=>{
						console.log(err)
					})
				})
				.catch((error) => {
				  console.log("error", error);
				});
				
			}
			
			const getTreeData=()=>{
				slxhapisystemcategorygetArticleTreeList({}).then(e=>{
					
					treeData.value=e.object.map(item=>{
						//item.label=item.categoryName
						return item
					})
					
				}).catch(err=>{
					console.log(err)
				})
			}
			const upChange = (info) => {
			     if (info.file.status !== 'uploading') {
			       
			     }
			     if (info.file.status === 'done') {
					let len=info.fileList.length  
					addForm.articleImg=info.fileList[len-1].response.object
			        globalVar.Message.success(`上传成功`);
					
			     } else if (info.file.status === 'error') {
					 
			        globalVar.Message.error(`上传失败`);
					
			     }
			   };
			return{
				viewfileUrl,
				upChange,
				fileurl,
				user,
				treeData,
				formRef,
				sureAdd,
				addnew,
				msg,
				addForm
				
			}
		}
	})
	
</script>

<style scoped>
	.add-right{
		top:0;
	}
	.page-wrap{
		width:100%;
		overflow: hidden;
	}
	.page-main{
		box-sizing: border-box;
		width:100%;
		display:flex;
		padding-right:60px;
	}
	.page-right{
		width:100%;
		
	}
</style>